<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="mydiv">这是一个div</div>
    <!-- Dom对象：通过js方式获取的元素对象 -->
    <!-- jQuery对象：通过jquery方法获取的元素对象，返回的是jQuery包装集 -->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8">
    </script>
    <script type="text/javascript">
        let divDom = document.getElementById("mydiv");
        console.log(divDom);
        let divDoms = document.getElementsByTagName("div");
        console.log(divDoms);

        /*Jquery对象*/
        //通过id选择获取元素对象 $("#id属性值")
        let divJquery = $("#mydiv");
        console.log(divJquery);
        //js获取不存在的元素
        let spanDom = document.getElementsByTagName("span");
        console.log(spanDom);
        //jquery获取不存在的元素
        let spanJquery = $("#span");
        console.log(spanJquery);
        //Dom对象转jQuery对象
        let divDomtoJquery = $(divDom);
        console.log(divDomtoJquery);
        //jQuery对象转Dom对象
        //先获取包装集对象中指定下标的元素,将jQuery对象转换成dom对象
        let divJqueryToDom = divJquery[0];
        console.log(divJqueryToDom);
    </script>



</body>

</html>